import { useState, memo, useMemo, useCallback } from "react"

const App = () => {
  const [state, setState] = useState(10);
  const [s, setS] = useState(1);

  // useMemo用于缓存数据源，只有当依赖发生变化时才会重新执行，相当与一个计算属性
  const getState = useMemo(() => {
    console.log('getState')
    return state + 2;
  }, [s])

  //用于缓存函数
  const changeS = useCallback(() => {
    setS(s + 1)
  }, [s])

  const clickBtn = () => {
    setState(state * 2);
  }
  return (
    <>
      <h1>App</h1>
      <p>{state}</p>
      <p>{getState}</p>
      <button onClick={clickBtn}>更改state</button>
      <A />
    </>
  )
}

// memo用于缓存组件
const A = memo(() => {
  console.log('a组件被重新渲染了')
  return (
    <>
      <h1>a组件</h1>
    </>
  )
})


export default App;